<template>
    <el-main>
      <el-row>
        <el-col :span="6">
          <el-statistic title="总阅读数" :value="statistic.viewCount">
            <template #prefix>
              <el-icon style="vertical-align: -0.125em">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="总点赞数" :value="statistic.voteCount">
            <template #prefix>
              <el-icon style="vertical-align: -0.125em">
                <Pointer />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="今日阅读" :value="statistic.todayViewCount">
            <template #prefix>
              <el-icon style="vertical-align: -0.125em">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="今日点赞" :value="statistic.todayVoteCount" >
            <template #prefix>
              <el-icon style="vertical-align: -0.125em">
                <Pointer />
              </el-icon>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col :span="24">
          <div id="main" style="width: 100%;height: 500px;"></div>
        </el-col>
      </el-row>
    </el-main>
</template>

<script lang="ts" setup>
import { ChatLineRound, Male ,Pointer} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import axios from "axios";
import { EChartsOption, init } from 'echarts';


const statistic=ref({})
const getStatistic=()=>{
  axios({
    method: 'get',
    url: '/bookSnapshot/getStatistic',
  }).then((response) => {
    if (response.data.data!==null){
      let data=response.data.data
      console.log(data[1])
      statistic.value.viewCount=data[1].viewCount
      statistic.value.voteCount=data[1].voteCount
      statistic.value.todayViewCount=data[1].viewIncrease
      statistic.value.todayVoteCount=data[1].voteIncrease
    }
  })
}

const init30DayEcharts=(list:any)=>{
  const chartEle: HTMLElement = document.getElementById('main') as HTMLElement;
  const myChart=init(chartEle);
  const xAxis=[];
  const seriesView=[];
  const seriesVote=[];
  for (let i = 0; i <list.length ; i++) {
    const record=list[i]
    xAxis.push(record.date)
    seriesView.push(record.viewIncrease)
    seriesVote.push(record.voteIncrease)
  }
  // 指定图表的配置项和数据
  const option:EChartsOption = {
    title: {
      text: '30天趋势图'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['总阅读量', '总点赞量']
    },
    grid: {
      left: '1%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '总阅读量',
        type: 'line',
        // stack: '总量', 不堆叠
        data: seriesView,
        smooth: true
      },
      {
        name: '总点赞量',
        type: 'line',
        // stack: '总量', 不堆叠
        data: seriesVote,
        smooth: true
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
const get30DayStatistic=()=>{
  axios({
    method: 'get',
    url: '/bookSnapshot/get30Statistic',
  }).then((response) => {
    if (response.data.data!==null){
      let data=response.data.data
      init30DayEcharts(data)
    }
  })
}
onMounted(()=>{
  getStatistic()
  get30DayStatistic()
})
</script>

<style scoped>
.el-col {
  text-align: center;
}
</style>
